<template>
  <div class="app-container">
    <el-table
      v-loading="loading"
      :data="order"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" label="用户名">
        <template slot-scope="scope">{{ scope.row.name }}</template>
      </el-table-column>
      <el-table-column align="center" label="email">
        <template slot-scope="scope">{{ scope.row.email }}</template>
      </el-table-column>
      <el-table-column align="center" label="phone">
        <template slot-scope="scope">{{ scope.row.phone }}</template>
      </el-table-column>
      <el-table-column align="center" label="咨询内容">
        <template slot-scope="scope">{{ scope.row.content }}</template>
      </el-table-column>
      <el-table-column align="center" label="是否已读">
        <template slot-scope="scope">{{ scope.row.is_read == 0 ? '未读' : '已读' }}</template>
      </el-table-column>
      <el-table-column
        class-name="status-col"
        label="操作"
        width="220"
        align="center"
      >
        <template slot-scope="scope">
          <el-button v-if="scope.row.is_read == 0" size="mini" type="success" @click="read(scope.row.id)">已读
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <section class="pagination-bar">
      <el-pagination
        background
        :current-page="query.page"
        :page-sizes="[100, 50, 30, 10]"
        :page-size="query.limit"
        layout="sizes, prev, pager, next"
        :total="count"
        @size-change="(limit) => {query.limit = limit; fetchData()}"
        @current-change="(page) => {query.page = page; fetchData()}"
      />
    </section>
  </div>
</template>

<script>
import api from '../../api'

export default {
  data() {
    return {
      order: '',
      count: 0,
      query: {
        page: 1,
        limit: 10
      },
      loading: false
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      api.order.getOrder(this.query).then(res => {
        if (res.err_no === 0) {
          this.order = res.data.data
          this.count = res.data.count
        } else {
          this.$notify.error({
            title: '错误',
            message: res.err_msg
          })
        }
      })
    },
    read(id) {
      api.order.read({ id: id }).then(res => {
        if (res.err_no === 0) {
          this.fetchData()
        } else {
          this.$notify.error({
            title: '错误',
            message: res.err_msg
          })
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
